<template>
  <div
      style="display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f7f7f7;">
    <div
        style="width: 80%; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
      <div v-if="tableData.length > 0" class="room-info">
        <img :src="getRoomImageUrl(tableData[0])" alt="Room Image"
             class="room-image" @mouseover="showOrangeBorder = true" @mouseleave="showOrangeBorder = false">
        <div class="room-details">
          <h2 class="room-name">{{ tableData[0].roomName }}</h2>
          <p class="room-price">价格: {{ tableData[0].price }}元</p>
          <p class="room-facilities">设施: {{ tableData[0].facilities }}</p>
          <p class="room-window">是否有窗: {{ tableData[0].hasWindow? '是' : '否' }}</p>
          <p class="room-breakfast">有无早餐: {{ tableData[0].breakfast? '有' : '无' }}</p>
          <p class="room-address">地址: {{ tableData[0].address }}</p>
          <div class="room-actions">
            <el-button @click="add" class="book-button">立即预订</el-button>
            <div class="room-stats">
              <span class="stat-item">分享</span>
              <span @click="incrementCollection" class="stat-item">收藏({{ collectionCount }})</span>
              <span @click="incrementLike" class="stat-item">点赞({{ likeCount }})</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 评论输入和提交 -->
      <div class="comment-input">
        <el-input v-model="commentContent" placeholder="输入评论内容" class="comment-input-field"></el-input>
        <input type="number" v-model="rating" min="1" max="5" placeholder="输入评分（1-5）" class="rating-input">
        <el-button @click="addComment" class="submit-comment-button">提交评论</el-button>
      </div>

      <!-- 评论展示 -->
      <div v-if="comments.length > 0" class="comments-section">
        <h3 class="comments-title">评论：</h3>
        <ul class="comments-list">
          <li v-for="(comment, index) in comments" :key="index" class="comment-item">
            <p class="comment-user">用户 ID：{{ comment.userId }}</p>
            <p class="comment-text">评论：{{ comment.remarks }}</p>
          </li>
        </ul>
      </div>
      <p v-else class="no-comments">暂无评论</p>

      <el-dialog
          v-model="dialogVisible"
          title="预订确认"
          width="30%"
          custom-class="booking-dialog"
      >
        <el-form :model="form" label-width="120px" class="booking-form">
          <el-form-item label="用户号">
            <el-input v-model="form.userId" class="form-input"></el-input>
          </el-form-item>
          <el-form-item label="房间类型">
            <el-input v-model="form.roomType" class="form-input"></el-input>
          </el-form-item>
          <el-form-item label="客户名">
            <el-input v-model="form.name" class="form-input"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone" class="form-input"></el-input>
          </el-form-item>
          <el-form-item label="入住时间">
            <el-date-picker v-model="form.checkinDate" class="form-input"></el-date-picker>
          </el-form-item>
          <el-form-item label="退房时间">
            <el-date-picker v-model="form.checkoutDate" class="form-input"></el-date-picker>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker v-model="form.orderTime" class="form-input"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remarks" class="form-input"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false" class="cancel-button">取消</el-button>
            <el-button type="primary" @click="save" class="confirm-button">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import Comment from "@/views/Comment";

export default {
  name: "HotelRoomInfo",
  components: {
    Comment,
  },
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      idQuery: '',
      showAdditionalPage: true,
      commentContent: '',
      comments: [],
      rating: 0,
      showOrangeBorder: false,
      collectionCount: 0,
      likeCount: 0
    };
  },
  methods: {
    getRoomImageUrl(room) {
      return room.coverImage.startsWith('http') ? room.coverImage : require(`@/${room.coverImage}`);
    },
    searchById(id) {
      request.get(`/user/getRoomInfoById/${id}`).then(res => {
        if (res.code === '0') {
          this.tableData = [res.data];
          this.showAdditionalPage = true;
          this.collectionCount = this.tableData[0]?.collectionCount || 0;
          this.likeCount = this.tableData[0]?.likeCount || 0;
        } else {
          this.$message({
            type: "error",
            message: "查询失败"
          });
          this.tableData = [];
          this.total = 0;
          this.showAdditionalPage = false;
        }
      });
    },
    add() {
      this.dialogVisible = true;
    },
    save() {
      request.post("user/order/getOrder", this.form).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "新增成功"
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg
          });
        }
        this.dialogVisible = false;
      });
    },
    incrementCollection() {
      this.collectionCount++;
    },
    incrementLike() {
      this.likeCount++;
    },
    addComment() {
      if (!this.commentContent.trim() || this.rating === 0) {
        this.$message.error('请输入评论内容并选择评分');
        return;
      }
      const id = this.$route.query.id;
      const randomCommentId = Math.floor(Math.random() * 10000);
      const commentData = {
        remarks: this.commentContent,
        rating: this.rating,
        roomId: id,
        commentId: randomCommentId,
        userId: 1
      };
      request.post('/user/addComment', commentData).then(res => {
        if (res.code === '0') {
          this.$message.success('评论成功');
          this.commentContent = '';
          this.rating = 0;
          this.getComments(id);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getComments(id) {
      request.get(`/user/getCommentPage/${id}`).then(res => {
        if (res.code === '0') {
          this.comments = res.data.list;
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      });
    }
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.searchById(id);
      this.getComments(id);
    }
  }
};
</script>

<style scoped>
.room-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}

.room-image {
  width: 150px;
  height: 100px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-right: 20px;
  transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;
  position: relative;
}

.room-image:hover {
  transform: scale(1.05);
}

.room-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border 0.3s ease-in-out;
}

.room-image:hover::after {
  border-color: #ff5722;
}

.room-details {
  flex: 1;
}

.room-name {
  color: #333;
  font-size: 24px;
  transition: color 0.3s ease-in-out;
}

.room-name:hover {
  color: #ff5722;
}

.room-price, .room-facilities, .room-window, .room-breakfast, .room-address {
  color: #666;
  font-size: 16px;
  margin-bottom: 10px;
}

.room-actions {
  display: flex;
  justify-content: space-between;
  width: 300px;
  margin-top: 20px;
}

.book-button {
  background-color: #ff5722;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.book-button:hover {
  background-color: #e64a19;
}

.stat-item {
  color: #666;
  font-size: 14px;
  margin-right: 10px;
  cursor: pointer;
  transition: color 0.3s ease-in-out;
}

.stat-item:hover {
  color: #ff5722;
}

.comment-input {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.comment-input-field {
  width: 50%;
  margin-right: 20px;
}

.rating-input {
  width: 100px;
  margin-right: 20px;
}

.submit-comment-button {
  background-color: #ff5722;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.submit-comment-button:hover {
  background-color: #e64a19;
}

.comments-section {
  margin-top: 40px;
}

.comments-title {
  color: #333;
  font-size: 20px;
  margin-bottom: 20px;
}

.comments-list {
  list-style: none;
  padding: 0;
}

.comment-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.comment-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.comment-user, .comment-text {
  color: #666;
  font-size: 16px;
}

.no-comments {
  color: #666;
  font-size: 16px;
  margin-top: 40px;
}

.booking-dialog {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.booking-form {
  width: 100%;
}

.form-input {
  width: 80%;
}

.cancel-button {
  background-color: #d3d3d3;
  color: #333;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.cancel-button:hover {
  background-color: #bfbfbf;
}

.confirm-button {
  background-color: #ff5722;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.confirm-button:hover {
  background-color: #e64a19;
}
</style>